<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.search" placeholder="真实姓名或手机号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="addExpert">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading"  style="text-align: center;">
			<el-table-column header-align="center" prop="id" label="用户ID"  width="120">
			</el-table-column>
			<el-table-column header-align="center" prop="username" label="账号呢称" >
			</el-table-column>
			<el-table-column header-align="center" prop="realName" label="真实姓名" width="200">
			</el-table-column>
			<el-table-column header-align="center" prop="phone" label="手机" width="200">
			</el-table-column>
			<el-table-column header-align="center" prop="name" label="鉴定品类" width="300" >
			</el-table-column>
			<el-table-column header-align="center" prop="count" label="鉴定次数" min-width="60" >
			</el-table-column>
			<el-table-column header-align="center" label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="lookexpertinfo(scope.$index, scope.row)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="num" :total="total" style="float:right;">
			</el-pagination>
			<div class="all">总计<span class="total">{{total}}</span>条记录</div>
		</el-col>

		<!--新增界面-->
		<el-dialog title="新增专家" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">	
		<el-row>
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="datainfo">
				<el-form-item>
					<el-input v-model="datainfo.id" placeholder="请输入用户ID"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getuserinfo">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		</el-row>
		<transition  name="fade" mode="out-in">
			<el-table :data="setexpertlist"  style="width: 100%;text-align: center;">
	     		<el-table-column header-align="center" prop="id" label="ID" width="180">
	     		</el-table-column>
		      	<el-table-column  header-align="center" prop="username" label="昵称" width="180">
		      	</el-table-column>
		      	<el-table-column header-align="center" prop="phone" label="手机号">
		      	</el-table-column>
		      	<el-table-column header-align="center" prop="createTime" label="注册时间">
		      	</el-table-column>
		    </el-table>
	    </transition>
			<el-row>
			  <el-col><div class="grid-content bg-purple" style="margin-top: 10px">指定品类</div></el-col>
			</el-row>
			<el-row>
				<el-col>
					<div class="grid-content tdclass bg-purple">
					  	<el-checkbox-group v-model='checkList'  @change="handleCheckedCitiesChange">
							<el-checkbox v-for="cate in category" :label="cate">{{cate.name}}</el-checkbox>
						</el-checkbox-group>
					</div>
				</el-col>
			</el-row>
			<el-row>
			  <el-col><div class="grid-content bg-purple">基本资料</div></el-col>
			</el-row>
			<el-row>
				<el-col>
					<div class="grid-content tdclass bg-purple">
						 <el-form :inline="true" :model="datainfo">
							<el-form-item>
								<span>手机号：</span>
								<el-input v-model="datainfo.phone" placeholder="请输入手机号"></el-input>
							</el-form-item>
							<el-form-item>
							<span>真实姓名：</span>
								<el-input v-model="datainfo.name" placeholder="请输入真实姓名"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
			</el-row>
			<el-row>
			  <el-col><div class="grid-content bg-purple">鉴赏分佣比例(百分比)</div></el-col>
			</el-row>
			<el-row>
			  <el-input v-model="monyRate" placeholder="50"></el-input>
			</el-row>
	  		<span slot="footer" class="dialog-footer">
			    <el-button @click="cancelAdd">取 消</el-button>
			    <el-button type="primary" @click="sureAdd">确 定</el-button>
  			</span>
		</el-dialog>
	</section>
</template>

<script>
	import { sendData,cutString  } from "../../api/api";
	export default {
		data() {
			return {
				filters: {
					search: ''
				},
				users: [],
				total: 1,
				page: 1,
				num:20,
				listLoading:false,
				dialogVisible:false,
				category:[],
				checkList: [],
				datainfo:{
					id:"",
					name:"",
					phone:""
				},
				monyRate:"",
				cateID:[],
				setexpertlist:[
					{
					id:"请搜索用户查看",
					username:"请搜索用户查看",
					phone:"请搜索用户查看",
					createTime:"请搜索用户查看"
					}
				]
			}
		},
		methods: {
			// 分页
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				let para = this.filters.search;
				let page=JSON.parse(this.page);
				let params=sendData({url:"export/find",msg:{search:para,pgNo:page,num:this.num}})
				this.$http.get(params.baseURL,{params:params.params}).then(res=>{
					var res=cutString(res.bodyText)
					this.total=res.msg.length
					this.users = res.msg
					console.log(res)
				})
			},
			//查看专家详情
			lookexpertinfo: function (index, row) {
				this.$router.push({  
            		path: '/expertinfo',   
            		name: '专家详情',  
            		params: {   
                		id: row.id, 
                		category:row.name,
                		expert:row.realName  
            		}   
        		})
			},
			//显示新增界面并且请求品类
			addExpert(){
				this.dialogVisible=true
				let params=sendData({url:"classfy/list",msg:{}})
				this.$http.get(params.baseURL, { params: params.params }).then(res=>{
					var res = cutString(res.bodyText);
					console.log(res)
					this.category=res.msg
				})
			},
			// 新增X关闭
			handleClose(done){
				this.$confirm('确认关闭？')
		          .then(_ => {
		          	this.datainfo.id=""
					this.datainfo.name=""
					this.datainfo.phone=""
					this.monyRate=""
					this.setexpertlist=[{id:"请搜索用户查看",username:"请搜索用户查看",phone:"请搜索用户查看",createTime:"请搜索用户查看"}]
		            done();

		          })
		          .catch(_ => {});
			},
			//新增专家，查询用户
			getuserinfo(){
				if (this.datainfo.id!==""&&!isNaN(this.datainfo.id)) {
						this.dialogVisible=true
						let params=sendData({url:"user/info",msg:{id:this.datainfo.id}})
						this.$http.get(params.baseURL, { params: params.params }).then(res=>{
							var res = cutString(res.bodyText);
							console.log(res)
							if (res.msg.length!==0) {
							res.msg.map(function(v,i){
								v.createTime=v.createTime.slice(0,19)
								v.phone=(v.phone==""?"暂无手机号":v.phone)
							})
							this.setexpertlist=res.msg
						}else{
							this.$confirm('此用户不存在')
				          .then(_ => {
				            done();

				          })
				          .catch(_ => {});
							}
						})

					}else{
					this.$message({
			              message: "请输入用户ID",
			              type: "error"
           			 });
					return
				}
			},
			
			// 新增选择品类
			handleCheckedCitiesChange(value){
				let arr=[]
				value.map(function(v,i){
					arr.push(v.id)
				})
				this.cateID=arr
			},
			// 新增专家品类取消
			cancelAdd(){
				this.datainfo.id=""
				this.datainfo.name=""
				this.datainfo.phone=""
				this.monyRate=""
				this.setexpertlist=[{id:"请搜索用户查看",username:"请搜索用户查看",phone:"请搜索用户查看",createTime:"请搜索用户查看"}]
				this.dialogVisible=false
			},
			// 新增专家传后台
			sureAdd(){
				var r=/^[1][3,4,5,7,8][0-9]{9}$/
				if (isNaN(this.setexpertlist[0].id)) {
					this.$confirm('请搜索唯一用户')
			          .then(_ => {
			            done();

			          })
			          .catch(_ => {});
					return
				}else if (this.cateID.length==0) {
					this.$confirm('请指定专家鉴赏品类')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
					return
				}else if (this.datainfo.name==""||this.datainfo.phone=="") {
					this.$confirm('请完整填写专家-基本信息')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
					return
				}else if(this.monyRate==""||isNaN(this.monyRate)){
					this.$confirm('请设定专家的分佣比例或者正确设置专家的分佣比例')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
					return
				}else if (!r.test(Number(this.datainfo.phone))){
					this.$message({
			              message: "请输入正确的手机号",
			              type: "error"
           			 });
					return
				}	
				let msg={
					id:this.setexpertlist[0].id,
					classfyIds:this.cateID,
					realName:this.datainfo.name,
					phone:this.datainfo.phone,
					wage:this.monyRate
				}
				let params=sendData({url:"export/add",msg:msg})
				this.$http.get(params.baseURL, { params: params.params }).then(res=>{
					var res = cutString(res.bodyText);
					console.log(res)
					if (res.desc=="success") {
					this.$confirm('设定专家成功')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
			          this.dialogVisible=false	
					}
				})
			}
			
			
		},
		watch:{
	       'datainfo.id':function(){
	        if (this.datainfo.id=='') {
	          this.setexpertlist=[{id:"请搜索用户查看",username:"请搜索用户查看",phone:"请搜索用户查看",createTime:"请搜索用户查看"}]
	          }
	       }, 
	  },
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped>
.all{
	font-size: 16px;
	line-height: 32px;
	color: #666
}
.total{
		padding:0 5px;
		color: #52BAE9;
	}

	.el-row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #def;
  }
  .tdclass{
  	background: #eee!important
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    line-height: 36px;
    min-height: 36px;
    padding-left: 30px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
.el-form-item{
	line-height: 36px;
	margin: 10px 0;
}
  .el-input{

  	width: 230px;
  }
  .el-dialog__footer{
  	text-align: center;
  }
</style>